<template>
    <div id="swiperMarquee">
        <div>
            <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide  v-for="(value,index) in 5" :key="index" >
                    <div class="marquee-item">
                        <img class="muad-userheader" src="../../../assets/images/speed_up _success.png" alt="">
                        <div>
                            <p>晓晓已帮拆</p>
                            <p>红包100元</p>
                        </div>
                    </div>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>
<script>
    import  { swiper, swiperSlide }   from 'vue-awesome-swiper'

    export default {
        name: 'swiperMarquee',
        props: {
            // SwiperContent: {
            //     type: Object
            // },
            // isFullUrl:{
            //     type:Boolean
            // }
        },
        data() {
            return {
                swiperOption: {
                    direction: 'vertical',
                    loop:true
                },
            }
        },
        created(){
            // if(this.SwiperContent.cycleImgs && this.SwiperContent.cycleImgs.length > 1){
            //     this.swiperOption.loop = true;
            // }
        },
        components: {
            swiper,
            swiperSlide,
        },
        // mounted(){
        //     // 初始化轮播图
        //     this.swiper.slideTo(1, 3000, false)
        //     // 开始自动播放
        //     this.swiper.startAutoplay()
        // },
        // computed: {
        //     swiper() {
        //         return this.$refs.mySwiper.swiper
        //     }
        // },
        // watch:{
        //     // SwiperContent:function (val) {
        //     //     if(Object.keys(val).length){
        //     //         if(this.SwiperContent.cycleImgs.length > 1){
        //     //             this.swiperOption.loop = true;
        //     //         }
        //     //     }
        //     // }
        // }
    }

</script>
<style lang="scss" scoped>
    .up-and-down{
        position: relative;
        height: .32rem;
        width: .95rem;
    }
    .marquee-item{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        border-radius:.25rem;
        font-size: .11rem;
        color:#fff;
    }
    .muad-userheader{
        width: .19rem;
        height: .19rem;
        padding: .01rem;
        margin-top: .07rem;
        margin-left: .07rem;
        background-color: #fff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
</style>